
@extends('layouts.head')
@section('title')
更新日志
@endsection
@section('content')
<section class="content-header" id="content-header">
更新日志
</section>

<section class="content" id="content">
<div class="box box-solid" >
  <div class="box-header with-border">
        <el-button-group>
              <el-button @click="addLogV = true " type="primary"  size="small" >添加</el-button>
              <el-button @click="getNew" type="primary"  size="small" >刷新</el-button>
        </el-button-group> 
        <el-button size="small" type=""  @click="yesterday" icon="arrow-left"></el-button>
        <el-date-picker v-model="date" style="width: 120px" size="small" type="date" placeholder="选择日期" > </el-date-picker>
        <el-button  size="small" type="" @click="tomorrow"  icon="arrow-right" ></el-button>
        <el-date-picker v-model="dateMore" style="width: 200px" size="small" type="daterange" placeholder="范围选取" > </el-date-picker>
  </div>
  <div class="box-body " >
      <ul class="todo-list" v-for="log in logs " style="font-size: small;">
        <li>

              <span class="handle">
                <i class="fa  fa-angle-right"></i>
              </span>
          <!-- checkbox -->
          <b><i class="fa fa-clock-o"></i> @{{log.date}}：</b>
          <!-- todo text -->
          <span >   @{{log.text}}。</span>
          <!-- Emphasis label -->
          
        </li>
      </ul>
</div>
</div>

<el-dialog title="添加日志" :visible.sync="addLogV"   >
<el-form ref="form" :model="addLogItem" label-width="80px">
  <el-form-item label="主题">
    <el-input v-model="addLogItem.title" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="模块">
      <el-select v-model="addLogItem.type" placeholder="请选择">
        <el-option  v-for="item in urls" :label="item.name" :value="item.name"> </el-option>
      </el-select>
  </el-form-item>
  <el-form-item label="内容">
    <el-input  type="textarea" v-model="addLogItem.text" size="small" ></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addLogV = false">取 消</el-button>
    <el-button type="primary" @click="submitAddLog">确 定 </el-button>
  </span>
</el-dialog>




</section>
<script >
   var content =new Vue({
        el:'#content',
        data:{
            date:'<?php echo date('Y-m-d') ?>',
            addLogV:false,
            lookLogV:false,
            editLogV:false,
            dateMore:'',
            searchWord:'',
            logs:[],
            urls:[],
            oneLog:[],
            logsCount:1,
            logsCurrentPage:1,
            addLogItem:{_token:'',title:'',date:'',type:'',info:'',text:'',},
            editLogItem:{_token:'',title:'',date:'',type:'',info:'',text:'',},

            multipleSelection: [],
        },
        created:function(){      
              this.$http.get('/log/getAll').then((response) => {this.logs=response.data; console.log('logs,success')},(response) =>{ }); 
              this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log('urls,success')},(response) =>{ }); 
               
        },
        computed: {
              
        },
        updated() {

        },
        methods:{
              getNew:function(){
                  this.$http.get('/log/getAll').then((response) => {this.logs=response.data; console.log('logs,success')},(response) =>{ }); 

              },
              search:function(){
                  console.log(this.searchWord);
                  this.$http.get('/log/search/'+this.searchWord).then((response) => {this.logs=response.data; this.logsCount = this.logs.length;console.log('word,logs,success')},(response) =>{ console.log(response);}); 
                  
              } ,
              yesterday:function(){
                  console.log('yesterday');
              },
              tomorrow:function(){
                  console.log('tomorrow');
              },
              submitAddLog:function(){
                  console.log('submitAddLog');
                  this.addLogV = false;
                  this.addLogItem._token = '{{csrf_token()}}';
                  this.$http.post('/log/add',this.addLogItem).then((response)=>{this.$notify.success('添加成功');
                              this.$http.get('/log/getCurrent/'+this.logsCurrentPage).then((response) => {this.logs=response.data; console.log(response.data)},(response) =>{ }); 
                              this.$http.get('/log/getCount').then((response) => {this.logsCount=response.data; console.log(response.data)},(response) =>{ }); 

                        },(response) =>{ this.$notify.error('未知错误')});

              },
              submitEditLog:function(){
                  console.log('submitEditLog');
                  this.editLogV = false;
                  this.editLogItem._token = '{{csrf_token()}}';
                  this.$http.post('/log/update/'+this.editLogItem.id,this.editLogItem).then((response)=>{this.$notify.info(response.data);
                              this.$http.get('/log/getCurrent/'+this.logsCurrentPage).then((response) => {this.logs=response.data; console.log(response.data)},(response) =>{ }); 
                              this.$http.get('/log/getCount').then((response) => {this.logsCount=response.data; console.log(response.data)},(response) =>{ }); 

                        },(response) =>{ });
              },
              submitSetRule:function(){
                 console.log('submitSetRule');
              },
              cancelAddLog:function(){
                  console.log('cancelAddLog');
              },
              lookRow:function(val){
                  this.lookLogV=true;
                  this.$http.get('/log/one/'+val).then((response) => {this.oneLog=response.data;console.log(response.data)},(response) =>{ }); 
                  console.log(val);
              },
              editRow:function(val){
                 this.editLogV=true;
                 this.$http.get('/log/one/'+val).then((response) => {this.editLogItem=response.data;console.log(response.data)},(response) =>{ }); 
                  console.log(val);
              },
              delRow:function(val){
                  console.log(val);
                  this.$http.get('/log/del/'+val).then((response) => {this.$notify.info(response.data);
                                this.$http.get('/log/getCurrent/'+this.logsCurrentPage).then((response) => {this.logs=response.data; console.log(response.data)},(response) =>{ }); 
                                this.$http.get('/log/getCount').then((response) => {this.logsCount=response.data; console.log(response.data)},(response) =>{ }); 

                          },(response) =>{ }); 

              },
              getlogsCurrentPage:function(val){
                  console.log(val);
                  this.logsCurrentPage=val;
                  this.$http.get('/log/getCurrent/'+this.logsCurrentPage).then((response) => {this.logs=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/log/getCount').then((response) => {this.logsCount=response.data; console.log(response.data)},(response) =>{ }); 
              },
              checkChange:function(rows){
                     if (rows) {
                        rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row);
                        });
                      } else {
                        this.$refs.multipleTable.clearSelection();
                      }
              }, 
              checkOne:function (val) {
                console.log(val);
                this.multipleSelection = val;
              } ,
         },

  });
</script>




@endsection

@section('pagejs')

@endsection

        




